<template>
<el-container>
  <el-header>
        <el-menu 
        background-color="#669999"
        text-color="#303133"
        class="el-menu-demo" 
        mode="horizontal" 
        >
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
        </el-menu>
  </el-header>
  <el-main>
    <!-- <el-page-header @back="goBack" content="详情页面"></el-page-header> -->
    <div>
      <router-view></router-view>
    </div>
  </el-main>
    <el-footer height="35" >
        <span>Java Web Technology sharing @xzbd</span>
    </el-footer>
</el-container>

</template>

<script>

export default {
    name: 'home',
    components:{
    }
}
</script>

<style scoped>
.el-container{
    height: calc( 100vh - 20px) !important;

}
.el-header{
    background-color: #669999;
}
.el-main{
    background-color: #CCCCCC;
}

.el-footer{
    background-color: #6699CC;
    justify-content: flex-end
}
</style>